
<template>
  <!-- 批量对账 -->
  <div class="contents">
    <el-alert
      title="温馨提示：只有未结算的订单，才可以进行批量对账；按商品汇总模式展示的为商品在一段时间区间内的均价。"
      type="info"
      show-icon
      :closable="false"
    ></el-alert>
    <el-row :gutter="5">
      <el-col :span="5">
        <el-date-picker
          v-model="dataFilter.timeList"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="width: 200px"
        ></el-date-picker>
      </el-col>
      <el-col :span="4">
        <el-cascader
          v-model="catevalue"
          :options="opt1"
          placeholder="全部分类"
          clearable
          @change="handleChange"
        ></el-cascader>
      </el-col>
      <el-col :span="4">
        <el-select
          placeholder="选择客户类型"
          v-model="dataFilter.categoryId"
          @change="changeTypeStatue"
        >
          <el-option
            v-for="item in opt2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select placeholder="选择集团"  v-model="dataFilter.groupId" @change="changeTypeStatue">
          <el-option
            v-for="(item,index) in opt3"
            :key="index"
            :label="item.name"
            :value="item.id"
           
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-input
          placeholder="输入商品名称"
          v-model="dataFilter.productName"
          @change="changeTypeStatue"
        ></el-input>
      </el-col>
      <el-col :span="4">
        <el-input placeholder="输入客户名称" v-model="dataFilter.customerName" >
          <el-button slot="append" icon="el-icon-search" @click="changeTypeStatue"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%; margin-top: 10px">
      <el-table-column prop="goodsInfo.name" label="商品名称"></el-table-column>
      <el-table-column
        prop="customerInfo.name"
        label="客户名称"
      ></el-table-column>
      <el-table-column prop="warehouseInfo.name" label="仓库"></el-table-column>
      <el-table-column
        prop="customerCategory.name"
        label="客户类型"
      ></el-table-column>
      <el-table-column prop="unit" label="单位"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes, jumper"
      :page-sizes="[10, 20, 30, 40, 100]"
      style="text-align: left"
      :total="total"
      :page-size="dataFilter.pages"
      :current-page="dataFilter.current"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getList } from '@/api/Finance/Batchreconciliation'
import { TypePagingQuery } from '@/api/customer/customerType'
import { getAllGroup } from '@/api/customer/customerProfile'
export default {
  data() {
    return {
      opt1: [
        {
          value: 'allCategray',
          label: '全部分类',
        },
        {
          value: 'zhinan',
          label: '国码库',
          children: [
            {
              value: 'daohang',
              label: '国码库导入',
            },
          ],
        },
      ],
      catevalue:'',
      opt2: [],
      opt3: [], //集团option
      tableData: [],
      dataFilter: {
        pagesize:10,
        current:1,
        timeList: [],
        categoryId: null,
        productName: '',
        customerName: '',
        ProductCategoryId: '',
        timeList: [], //对账时间
        groupId:null
      },
      total:0
    }
  },
  created() {
    this.paggingQuery()
    this.query()
    this.selectGroup()
  },
  methods: {
    changeTypeStatue() {
      this.paggingQuery()
    },
    async selectGroup(){
      const res = await getAllGroup()
      this.opt3 = res.data
    },
    async paggingQuery() {
      const response = await getList(this.dataFilter)
      this.tableData = response.list
      this.total = response.total
    },
    async query() {
      const res = await TypePagingQuery(1, 10)
      this.opt2 = res.data.list
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.dataFilter.pagesize = val
      this.paggingQuery()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.dataFilter.current = val
      this.paggingQuery()
    },
    handleChange() {},
  },
}
</script>

<style lang="scss" scoped>
.contents {
  padding: 10px 20px;
}
</style>
